<template>
   <li>
        <img :src="data.image" alt="">
        <p>{{data.title}}</p>
        <div class="keyworld" v-if="data.price"><span>淘宝</span><span>包邮</span></div>
        <div class="bottom">
          <span class="price" v-if="data.price">¥{{data.price}}</span>
          <span class="salenum" v-if="data.saleNum">{{data.saleNum}}人买过</span>
          <span class="Value" v-if="data.couponValue">{{data.couponValue}}</span>
        </div>
      </li>
</template>
<script>
export default {
  props: ['data']

}
</script>
<style lang="scss" scoped>
  li{
    list-style: none;
    background: #fff;
    margin-bottom: 10px;
    width: 49%;
    img{
      width: 100%;
    }
    p{
      width: 100%;
      font-size: 14px;
      color: #666;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .keyworld{
      display: flex;
      justify-content: space-around;
    }
    span{
      font-size: 14px;
    }
    .price{
      color: #fa585a;
      font-size: 18px;
    }
    .salenum{
      font-size: 12px;
      color: #999;
    }
    .Value{
      font-size: 12px;
      color: #fa585a;
      border: 1px solid #fa585a;
    }
    .bottom{
      display: flex;
      justify-content: space-around;
    }
  }
</style>
